<template>
  <div class="mobile-software-query">
    <!-- 顶部导航栏 -->
    <div class="mobile-header">
      <div class="header-content">
        <h1 class="header-title">
          <i class="bi bi-pc-display"></i>
          软件正版化查询
        </h1>
        <div class="header-actions">
          <button class="btn btn-sm btn-outline-light" @click="refreshData" :disabled="loading">
            <i class="bi bi-arrow-clockwise"></i>
          </button>
          <button class="btn btn-sm btn-outline-light" @click="goBack">
            <i class="bi bi-arrow-left"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="mobile-content">
      <!-- 查询表单 -->
      <div class="query-section">
        <div class="query-card">
          <div class="query-header">
            <i class="bi bi-search"></i>
            <span class="query-title">MAC地址查询</span>
          </div>
          <div class="query-body">
            <div class="input-wrapper">
              <div class="input-group">
                <label class="input-label">MAC地址</label>
                <div class="input-with-scan">
                  <input 
                    type="text" 
                    class="form-control query-input" 
                    v-model="macAddress" 
                    placeholder="请输入MAC地址或扫描二维码"
                    @input="validateMacAddress"
                    @keyup.enter="querySoftwareList"
                  >
                  <button 
                    class="btn btn-outline-secondary scan-btn" 
                    @click="startQRScan"
                    :disabled="loading"
                  >
                    <i class="bi bi-qr-code-scan"></i>
                  </button>
                </div>
              </div>
              <div v-if="macError" class="error-tip">
                <i class="bi bi-exclamation-triangle"></i>
                {{ macError }}
              </div>
            </div>
            <button 
              class="btn btn-primary btn-lg w-100 query-btn" 
              @click="querySoftwareList"
              :disabled="loading || !isValidMac"
            >
              <i class="bi bi-search" v-if="!loading"></i>
              <div class="spinner-small" v-if="loading"></div>
              <span v-if="loading">查询中...</span>
              <span v-else>查询软件列表</span>
            </button>
          </div>
        </div>
      </div>

      <!-- 查询结果 -->
      <div class="results-section" v-if="hasSearched">
        <!-- 有数据时显示结果 -->
        <div v-if="softwareList.length > 0" class="software-list">
          <div class="results-header">
            <div class="results-title">
              <i class="bi bi-list-ul"></i>
              软件列表 ({{ softwareList.length }}个)
            </div>
            <div class="results-info">
              查询MAC: {{ searchedMac }}
            </div>
            <!-- 搜索框 -->
            <div class="search-wrapper" v-if="softwareList.length > 0">
              <div class="search-input-group">
                <input 
                  type="text" 
                  class="form-control search-input" 
                  v-model="searchKeyword" 
                  placeholder="搜索软件名称..."
                  @input="filterSoftware"
                >
                <i class="bi bi-search search-icon"></i>
              </div>
            </div>
          </div>

          <!-- 软件列表 -->
          <div class="software-table-container">
            <table class="software-table">
              <thead>
                <tr>
                  <th>软件名称</th>
                  <th>版本</th>
                  <th>发布商</th>
                  <th>安装日期</th>
                  <th>来源</th>
                </tr>
              </thead>
              <tbody>
                <tr 
                  v-for="(software, index) in displayedSoftware" 
                  :key="software.id"
                  :class="{ 'highlight-row': index < 10 }"
                >
                  <td class="software-name">{{ software.name || '-' }}</td>
                  <td class="software-version">{{ software.version || '-' }}</td>
                  <td class="software-publisher">{{ software.publisher || '-' }}</td>
                  <td class="software-date">{{ formatInstallDate(software.installDate) }}</td>
                  <td class="software-source">{{ software.source || '-' }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- 展开/收起按钮 -->
          <div class="expand-section" v-if="filteredSoftware.length > 10">
            <button 
              class="btn btn-outline-primary expand-btn" 
              @click="toggleExpand"
            >
              <i :class="showAll ? 'bi bi-chevron-up' : 'bi bi-chevron-down'"></i>
              {{ showAll ? '收起' : `展开显示全部 (${filteredSoftware.length}个)` }}
            </button>
          </div>
        </div>

        <!-- 无数据提示 -->
        <div class="empty-state" v-else>
          <div class="empty-icon">
            <i class="bi bi-inbox"></i>
          </div>
          <div class="empty-title">未找到软件信息</div>
          <div class="empty-subtitle">
            MAC地址 {{ searchedMac }} 暂无相关软件信息
          </div>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="help-section" v-if="!hasSearched">
        <div class="help-card">
          <div class="help-header">
            <i class="bi bi-info-circle"></i>
            <span>使用说明</span>
          </div>
          <div class="help-content">
            <ul class="help-list">
              <li>请输入设备的MAC地址（格式：00:11:22:33:44:55）</li>
              <li>支持手工输入或点击扫码按钮扫描二维码</li>
              <li>系统将查询该设备上安装的所有软件信息</li>
              <li>默认显示前10个软件，可展开查看全部</li>
              <li>支持按软件名称进行模糊搜索</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="loading-overlay" v-if="loading">
      <div class="loading-content">
        <div class="spinner"></div>
        <div class="loading-text">正在查询软件信息...</div>
      </div>
    </div>

    <!-- 二维码扫描模态框 -->
    <div class="qr-modal" v-if="showQRModal" @click="closeQRModal">
      <div class="qr-modal-content" @click.stop>
        <div class="qr-modal-header">
          <h5>扫描二维码</h5>
          <button class="btn-close" @click="closeQRModal">
            <i class="bi bi-x"></i>
          </button>
        </div>
        <div class="qr-modal-body">
          <div class="qr-scanner" ref="qrScanner">
            <div class="scanner-placeholder" v-if="!cameraActive">
              <i class="bi bi-camera"></i>
              <p v-if="!permissionRequested">点击开始扫描启动摄像头</p>
              <p v-else-if="permissionRequested && !cameraActive">正在启动摄像头...</p>
              <small v-if="permissionRequested">请允许浏览器访问摄像头权限</small>
            </div>
          </div>
          <div class="scan-tips">
            <p><i class="bi bi-info-circle"></i> 将二维码对准扫描框进行识别</p>
          </div>
          <div class="permission-guide" v-if="showPermissionGuide">
            <h4><i class="bi bi-exclamation-triangle"></i> 摄像头权限设置指南</h4>
            <div class="guide-steps">
              <p><strong>Chrome浏览器：</strong></p>
              <ol>
                <li>点击地址栏左侧的摄像头图标</li>
                <li>选择"始终允许"</li>
                <li>刷新页面重试</li>
              </ol>
              <p><strong>Safari浏览器：</strong></p>
              <ol>
                <li>进入设置 → Safari → 摄像头</li>
                <li>选择"询问"或"允许"</li>
                <li>返回页面重试</li>
              </ol>
              <p><strong>微信内置浏览器：</strong></p>
              <ol>
                <li>点击右上角"..."菜单</li>
                <li>选择"在浏览器中打开"</li>
                <li>使用系统浏览器访问</li>
              </ol>
            </div>
          </div>
        </div>
        <div class="qr-modal-footer">
          <button type="button" class="btn btn-secondary" @click="toggleManualInput" v-if="!showManualInput">
            <i class="bi bi-keyboard"></i> 手动输入
          </button>
          <button type="button" class="btn btn-primary" @click="toggleManualInput" v-if="showManualInput">
            <i class="bi bi-camera"></i> 返回扫描
          </button>
          <button type="button" class="btn btn-secondary" @click="closeQRModal">
            <i class="bi bi-x-circle"></i> 取消
          </button>
        </div>
        
        <!-- 手动输入区域 -->
        <div class="manual-input-section" v-if="showManualInput">
          <div class="manual-input-header">
            <h4><i class="bi bi-keyboard"></i> 手动输入MAC地址</h4>
            <p>如果无法使用摄像头扫描，请手动输入MAC地址</p>
          </div>
          <div class="manual-input-form">
            <div class="form-group">
              <label for="manualMac">MAC地址：</label>
              <input 
                type="text" 
                id="manualMac" 
                v-model="manualMacInput" 
                placeholder="例如：00:11:22:33:44:55"
                class="form-control"
                @input="validateManualMac"
              >
              <div class="invalid-feedback" v-if="manualMacError">
                {{ manualMacError }}
              </div>
            </div>
            <div class="manual-input-actions">
              <button 
                type="button" 
                class="btn btn-primary" 
                @click="confirmManualInput"
                :disabled="!isManualMacValid"
              >
                <i class="bi bi-check-circle"></i> 确认
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import jsQR from 'jsqr'
import api from '@/utils/api'

const router = useRouter()

// 响应式数据
const macAddress = ref('')
const macError = ref('')
const loading = ref(false)
const hasSearched = ref(false)
const searchedMac = ref('')
const softwareList = ref([])
const searchKeyword = ref('')
const filteredSoftware = ref([])
const showAll = ref(false)
const showQRModal = ref(false)
const cameraActive = ref(false)
const permissionRequested = ref(false)
const showPermissionGuide = ref(false)
const showManualInput = ref(false)
const manualMacInput = ref('')
const manualMacError = ref('')
const isManualMacValid = ref(false)

// 计算属性
const isValidMac = computed(() => {
  // MAC地址格式验证：支持多种常见格式
  const macPattern = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$|^([0-9A-Fa-f]{12})$/
  return macPattern.test(macAddress.value)
})

const displayedSoftware = computed(() => {
  if (showAll.value) {
    return filteredSoftware.value
  }
  return filteredSoftware.value.slice(0, 10)
})

// 方法
const validateMacAddress = () => {
  const mac = macAddress.value.trim()
  if (!mac) {
    macError.value = ''
    return
  }
  
  // 自动格式化MAC地址
  const cleanMac = mac.replace(/[^0-9A-Fa-f]/g, '')
  if (cleanMac.length > 12) {
    macAddress.value = mac.slice(0, -1)
    return
  }
  
  if (cleanMac.length === 12) {
    // 自动添加冒号分隔符
    const formattedMac = cleanMac.replace(/(\w{2})/g, '$1:').slice(0, -1)
    if (mac !== formattedMac) {
      macAddress.value = formattedMac
    }
  }
  
  if (!isValidMac.value && mac.length >= 12) {
    macError.value = '请输入正确的MAC地址格式'
    return
  }
  
  macError.value = ''
}

const querySoftwareList = async () => {
  if (!isValidMac.value) {
    macError.value = '请输入正确的MAC地址格式'
    return
  }

  loading.value = true
  hasSearched.value = false
  softwareList.value = []
  filteredSoftware.value = []
  searchKeyword.value = ''
  showAll.value = false
  
  try {
    const response = await api.post('/api/PcSoftware/GetByMacAddress', {
      macAddress: macAddress.value
    })
    
    if (response.data.success) {
      const data = response.data.data
      softwareList.value = data.softwareList || []
      filteredSoftware.value = [...softwareList.value]
      searchedMac.value = macAddress.value
      hasSearched.value = true
    } else {
      throw new Error(response.data.message || '查询失败')
    }
  } catch (error) {
    console.error('查询软件列表失败:', error)
    softwareList.value = []
    filteredSoftware.value = []
    searchedMac.value = macAddress.value
    hasSearched.value = true
    
    // 显示错误提示
    macError.value = error.message || '查询失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

const filterSoftware = () => {
  const keyword = searchKeyword.value.toLowerCase().trim()
  if (!keyword) {
    filteredSoftware.value = [...softwareList.value]
  } else {
    filteredSoftware.value = softwareList.value.filter(software => 
      software.name && software.name.toLowerCase().includes(keyword)
    )
  }
  showAll.value = false
}

const toggleExpand = () => {
  showAll.value = !showAll.value
}

const refreshData = () => {
  if (hasSearched.value && searchedMac.value) {
    macAddress.value = searchedMac.value
    querySoftwareList()
  }
}

const goBack = () => {
  router.back()
}

// 二维码扫描相关
const startQRScan = async () => {
  try {
    // 检查是否支持摄像头
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      throw new Error('您的设备不支持摄像头功能')
    }

    showQRModal.value = true
    permissionRequested.value = true
    showPermissionGuide.value = false
    
    // 请求摄像头权限
    const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        facingMode: 'environment', // 使用后置摄像头
        width: { ideal: 1280 },
        height: { ideal: 720 }
      }
    })
    
    cameraActive.value = true
    
    // 获取video元素并设置流
    const video = document.createElement('video')
    video.srcObject = stream
    video.setAttribute('playsinline', true)
    video.play()
    
    // 替换扫描区域内容
    const scannerElement = document.querySelector('.qr-scanner')
    if (scannerElement) {
      scannerElement.innerHTML = ''
      scannerElement.appendChild(video)
      
      // 添加扫描框样式
      const scanFrame = document.createElement('div')
      scanFrame.className = 'scan-frame'
      scannerElement.appendChild(scanFrame)
    }
    
    // 使用jsQR库进行二维码识别
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    
    const scanQRCode = () => {
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        canvas.height = video.videoHeight
        canvas.width = video.videoWidth
        context.drawImage(video, 0, 0, canvas.width, canvas.height)
        
        const imageData = context.getImageData(0, 0, canvas.width, canvas.height)
        
        // 使用jsQR库解析二维码
        const code = jsQR(imageData.data, imageData.width, imageData.height)
        
        if (code) {
          // 扫描成功，获取二维码内容
          const qrContent = code.data
          
          // 尝试从二维码内容中提取MAC地址
          // 支持多种格式：直接MAC地址、包含MAC的JSON、URL参数等
          let extractedMac = ''
          
          // 检查是否是直接的MAC地址格式
          const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
          if (macRegex.test(qrContent)) {
            extractedMac = qrContent.toUpperCase().replace(/[-:]/g, ':')
          } else {
            // 尝试从JSON中提取
            try {
              const jsonData = JSON.parse(qrContent)
              if (jsonData.mac || jsonData.macAddress) {
                extractedMac = (jsonData.mac || jsonData.macAddress).toUpperCase().replace(/[-:]/g, ':')
              }
            } catch {
              // 尝试从URL参数中提取
              const urlParams = new URLSearchParams(qrContent.split('?')[1] || '')
              const macParam = urlParams.get('mac') || urlParams.get('macAddress')
              if (macParam) {
                extractedMac = macParam.toUpperCase().replace(/[-:]/g, ':')
              }
            }
          }
          
          if (extractedMac && macRegex.test(extractedMac)) {
            macAddress.value = extractedMac
            
            // 停止摄像头
            stream.getTracks().forEach(track => track.stop())
            closeQRModal()
            validateMacAddress()
            return
          } else {
            // 二维码内容不包含有效的MAC地址
            console.log('二维码内容:', qrContent)
            macError.value = '二维码中未找到有效的MAC地址'
            
            // 停止摄像头并关闭模态框
            stream.getTracks().forEach(track => track.stop())
            closeQRModal()
            return
          }
        }
      }
      
      // 继续扫描
      if (showQRModal.value) {
        requestAnimationFrame(scanQRCode)
      }
    }
    
    // 开始扫描
    video.addEventListener('loadedmetadata', () => {
      scanQRCode()
    })
    
  } catch (error) {
    console.error('摄像头访问失败:', error)
    
    let errorMessage = '无法访问摄像头'
    if (error.name === 'NotAllowedError') {
      errorMessage = '摄像头权限被拒绝，请查看下方权限设置指南'
      showPermissionGuide.value = true
    } else if (error.name === 'NotFoundError') {
      errorMessage = '未检测到摄像头设备'
    } else if (error.name === 'NotSupportedError') {
      errorMessage = '您的浏览器不支持摄像头功能'
    }
    
    macError.value = errorMessage
    cameraActive.value = false
    permissionRequested.value = false
    
    // 如果是权限问题，不关闭模态框，显示指南
    if (error.name !== 'NotAllowedError') {
      showQRModal.value = false
    }
  }
}

const closeQRModal = () => {
  // 停止所有摄像头流
  const video = document.querySelector('.qr-scanner video')
  if (video && video.srcObject) {
    const stream = video.srcObject
    stream.getTracks().forEach(track => track.stop())
  }
  
  // 重置状态
  showQRModal.value = false
  cameraActive.value = false
  permissionRequested.value = false
  showPermissionGuide.value = false
  showManualInput.value = false
  manualMacInput.value = ''
  manualMacError.value = ''
  isManualMacValid.value = false
}

// 工具方法
const formatInstallDate = (dateStr) => {
  if (!dateStr) return '-'
  // 处理YYYYMMDD格式
  if (dateStr.length === 8) {
    const year = dateStr.substring(0, 4)
    const month = dateStr.substring(4, 6)
    const day = dateStr.substring(6, 8)
    return `${year}-${month}-${day}`
  }
  return dateStr
}

// 手动输入相关
const toggleManualInput = () => {
  showManualInput.value = !showManualInput.value
  if (showManualInput.value) {
    // 切换到手动输入时，停止摄像头
    const video = document.querySelector('.qr-scanner video')
    if (video && video.srcObject) {
      const stream = video.srcObject
      stream.getTracks().forEach(track => track.stop())
    }
    cameraActive.value = false
    permissionRequested.value = false
    showPermissionGuide.value = false
  } else {
    // 返回扫描模式时，清空手动输入
    manualMacInput.value = ''
    manualMacError.value = ''
    isManualMacValid.value = false
  }
}

const validateManualMac = () => {
  const mac = manualMacInput.value.trim()
  const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
  
  if (!mac) {
    manualMacError.value = ''
    isManualMacValid.value = false
    return
  }
  
  if (macRegex.test(mac)) {
    manualMacError.value = ''
    isManualMacValid.value = true
  } else {
    manualMacError.value = 'MAC地址格式不正确，请使用格式：00:11:22:33:44:55'
    isManualMacValid.value = false
  }
}

const confirmManualInput = () => {
  if (isManualMacValid.value) {
    macAddress.value = manualMacInput.value.trim().toUpperCase().replace(/[-:]/g, ':')
    closeQRModal()
    validateMacAddress()
  }
}

// 组件挂载
onMounted(() => {
  // 页面初始化逻辑
})
</script>

<style scoped>
/* 基础布局 */
.mobile-software-query {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 顶部导航栏 */
.mobile-header {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
  backdrop-filter: blur(10px);
  color: #e3f2fd;
  padding: 0.32rem;
  padding-top: calc(0.32rem + env(safe-area-inset-top));
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: #e3f2fd;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
}

.header-title i {
  font-size: 1.1rem;
  line-height: 1;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
}

.header-actions .btn {
  border-radius: 6px;
  width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.85rem;
}

.header-actions .btn:hover {
  background: rgba(255, 255, 255, 0.3);
  color: white;
  border-color: rgba(255, 255, 255, 0.7);
}

/* 主要内容区域 */
.mobile-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* 查询表单 */
.query-section {
  margin-bottom: 2rem;
}

.query-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
}

.query-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.query-header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.query-header i {
  color: rgba(255, 255, 255, 0.9);
}

.query-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.query-body {
  padding: 1.5rem;
}

.input-wrapper {
  margin-bottom: 1.5rem;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.input-label {
  font-weight: 600;
  color: #495057;
  font-size: 0.95rem;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}

.input-with-scan {
  display: flex;
  width: 100%;
  gap: 0.5rem;
}

.query-input {
  flex: 1;
  padding: 0.875rem 1rem;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
}

.query-input:focus {
  outline: none;
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.scan-btn {
  padding: 0.875rem 1rem;
  border-radius: 12px;
  border: 2px solid #667eea;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-btn:hover:not(:disabled) {
  background: #667eea;
  color: white;
  border-color: #667eea;
  transform: scale(1.05);
}

.scan-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-tip {
  color: #dc3545;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 81px;
}

.query-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  border-radius: 12px;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.query-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.query-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 查询结果 */
.results-section {
  margin-bottom: 2rem;
}

.results-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.results-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.results-title i {
  color: #667eea;
}

.results-info {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* 搜索框 */
.search-wrapper {
  margin-top: 1rem;
}

.search-input-group {
  position: relative;
  max-width: 300px;
}

.search-input {
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  width: 100%;
}

.search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.search-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  pointer-events: none;
}

/* 软件列表表格 */
.software-table-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 1rem;
}

.software-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.software-table th {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 0.75rem 0.5rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
}

.software-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #e9ecef;
  vertical-align: top;
}

.software-table tr:last-child td {
  border-bottom: none;
}

.software-table tr:hover {
  background: rgba(102, 126, 234, 0.05);
}

.highlight-row {
  background: rgba(102, 126, 234, 0.08) !important;
}

.highlight-row:hover {
  background: rgba(102, 126, 234, 0.12) !important;
}

.software-name {
  font-weight: 600;
  color: #495057;
  max-width: 200px;
  word-break: break-word;
}

.software-version {
  color: #6c757d;
  font-family: monospace;
  font-size: 0.85rem;
}

.software-publisher {
  color: #495057;
  max-width: 150px;
  word-break: break-word;
}

.software-date {
  color: #6c757d;
  font-size: 0.85rem;
  white-space: nowrap;
}

.software-source {
  color: #6c757d;
  font-size: 0.85rem;
}

/* 展开按钮 */
.expand-section {
  text-align: center;
  margin-top: 1rem;
}

.expand-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  font-weight: 500;
  border: 2px solid #e9ecef;
}

.expand-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  border-color: #667eea;
  color: #667eea;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.empty-icon {
  font-size: 4rem;
  color: #adb5bd;
  margin-bottom: 1rem;
}

.empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
}

.empty-subtitle {
  color: #6c757d;
  font-size: 1rem;
}

/* 使用说明 */
.help-section {
  margin-bottom: 2rem;
}

.help-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.help-header {
  background: linear-gradient(135deg, #17a2b8, #138496);
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.help-header i {
  color: rgba(255, 255, 255, 0.9);
}

.help-content {
  padding: 1.5rem;
}

.help-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9ecef;
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.5;
}

.help-list li:last-child {
  border-bottom: none;
}

.help-list li::before {
  content: '•';
  color: #17a2b8;
  font-weight: bold;
  position: absolute;
  left: 0;
  margin-top: 0.1rem;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

.loading-text {
  color: #495057;
  font-weight: 600;
}

/* 二维码扫描模态框 */
.qr-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.qr-modal-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  max-width: 400px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.qr-modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qr-modal-header h5 {
  margin: 0;
  font-weight: 600;
}

.btn-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close:hover {
  color: #495057;
}

.qr-modal-body {
  padding: 1.5rem;
}

.qr-scanner {
  width: 100%;
  height: 250px;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  position: relative;
  overflow: hidden;
}

.qr-scanner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.scan-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 2px solid #667eea;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.scan-frame::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid transparent;
  border-top-color: #667eea;
  border-radius: 8px;
  animation: scan-line 2s linear infinite;
}

@keyframes scan-line {
  0% {
    border-top-color: #667eea;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  25% {
    border-top-color: #667eea;
    border-right-color: #667eea;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  50% {
    border-top-color: #667eea;
    border-right-color: #667eea;
    border-bottom-color: #667eea;
    border-left-color: transparent;
  }
  75% {
    border-top-color: #667eea;
    border-right-color: #667eea;
    border-bottom-color: #667eea;
    border-left-color: #667eea;
  }
  100% {
    border-top-color: #667eea;
    border-right-color: #667eea;
    border-bottom-color: #667eea;
    border-left-color: #667eea;
  }
}

.scanner-placeholder {
  text-align: center;
  color: #6c757d;
}

.scanner-placeholder i {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.scan-tips {
  text-align: center;
  margin-top: 1rem;
  color: #6c757d;
  font-size: 0.9rem;
}

.scan-tips i {
  color: #667eea;
  margin-right: 0.25rem;
}

.permission-guide {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  text-align: left;
}

.permission-guide h4 {
  color: #856404;
  margin: 0 0 1rem 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.permission-guide h4 i {
  color: #f39c12;
}

.guide-steps {
  font-size: 0.9rem;
  color: #6c5b00;
}

.guide-steps p {
  margin: 0.75rem 0 0.25rem 0;
  font-weight: 600;
}

.guide-steps ol {
  margin: 0.25rem 0 0.75rem 1rem;
  padding: 0;
}

.guide-steps li {
  margin: 0.25rem 0;
  line-height: 1.4;
}

.qr-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

/* 手动输入区域 */
.manual-input-section {
  padding: 1.5rem;
  border-top: 1px solid #e9ecef;
  background: rgba(248, 249, 250, 0.8);
}

.manual-input-header {
  margin-bottom: 1rem;
}

.manual-input-header h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.manual-input-header p {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.manual-input-form .form-group {
  margin-bottom: 1rem;
}

.manual-input-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #495057;
}

.manual-input-form .form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 0.9rem;
}

.manual-input-form .form-control:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.invalid-feedback {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.manual-input-actions {
  text-align: right;
}

.manual-input-actions .btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.manual-input-actions .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .mobile-content {
    padding: 0.5rem;
  }
  
  .query-card,
  .results-header,
  .help-card,
  .software-table-container {
    padding: 1rem;
  }
  
  .software-table {
    font-size: 0.8rem;
  }
  
  .software-table th,
  .software-table td {
    padding: 0.5rem 0.25rem;
  }
  
  .software-name {
    max-width: 120px;
  }
  
  .software-publisher {
    max-width: 100px;
  }
  
  .header-title {
    font-size: 1rem;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .mobile-software-query {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #e9ecef;
  }
  
  .mobile-header {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.9));
  }
  
  .query-card,
  .results-header,
  .help-card,
  .software-table-container,
  .loading-content,
  .qr-modal-content {
    background: rgba(30, 30, 30, 0.95);
    color: #e9ecef;
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .software-table {
    color: #e9ecef;
  }
  
  .software-table td {
    border-bottom-color: #495057;
  }
  
  .software-table tr:hover {
    background: rgba(102, 126, 234, 0.1);
  }
  
  .query-input,
  .search-input {
    background: rgba(40, 40, 40, 0.8);
    border-color: #555;
    color: #e9ecef;
  }
  
  .query-input:focus,
  .search-input:focus {
    background: rgba(60, 60, 60, 0.8);
    border-color: #667eea;
  }
  
  .empty-state {
    background: rgba(30, 30, 30, 0.95);
    color: #e9ecef;
  }
  
  .qr-scanner {
    background: #1a1a1a;
    border-color: #444;
  }
  
  .expand-btn {
    border-color: #555;
    color: #e9ecef;
  }
  
  .expand-btn:hover {
    border-color: #667eea;
    color: #667eea;
  }
}
</style>